<template>
    <div class="poker-strategy">
        <poker-strategy-nav @menuChange="handleMenuChange"></poker-strategy-nav>
        <poker-strategy-table
            :strategies="pokerStrategy"
            :handStrategies="currentHandStrategies"
            @checkDetail="handleCheckDetail"
            @generateReport="handleGenerateReport"
        ></poker-strategy-table>
        <hand-strategy
            :isOpen.sync="showHandStrategy"
            :handStrategy="currentBoardStrategies"
            :board="currentBoard"
        ></hand-strategy>
        <hand-analyze
            :isOpen.sync="showHandAnalyze"
            :strategies="currentHandStrategies"
            :boards="seletedBoard"
        ></hand-analyze>
    </div>
</template>

<script>
import PokerStrategyNav from "./poker-strategy-nav";
import PokerStrategyTable from "./poker-strategy-table";
import HandStrategy from "../hand-strategy";
import HandAnalyze from "../hand-analyze";
import pokerMap from "@/utils/poker/poker-strategy.js";
export default {
    name: "PokerStrategy",
    components: {
        PokerStrategyNav,
        PokerStrategyTable,
        HandStrategy,
        HandAnalyze,
    },
    data() {
        return {
            pokerStrategy: {
                table_column: [],
                flop_strategies: [],
            },
            currentIndex: "",
            currentBoard: "",
            showHandStrategy: false,
            showHandAnalyze: false,
            seletedBoard: [],
            currentHandStrategies: {},
        };
    },
    computed: {
        currentBoardStrategies() {
            if (!this.currentBoard) {
                return {};
            }
            return this.currentHandStrategies[this.currentBoard];
        },
    },
    watch: {
        currentIndex(val) {
            let indexArray = this.currentIndex.split("-");
            fetch(`poker/${indexArray[0]}/${indexArray[1]}.json`)
                .then((res) => res.json())
                .then((res) => {
                    this.currentHandStrategies = res;
                }).catch((err) => {
                    this.currentHandStrategies = {};
                });
        },
    },
    methods: {
        handleMenuChange(index) {
            this.currentIndex = index;
            let indexArray = index.split("-");
            this.pokerStrategy = pokerMap[indexArray[0]][indexArray[1]];
        },
        handleCheckDetail(board) {
            this.currentBoard = board;
            this.showHandStrategy = true;
        },
        handleGenerateReport(seletedBoard) {
            this.seletedBoard = seletedBoard;
            this.showHandAnalyze = true;
        },
    },
};
</script>

<style lang="scss">
.poker-strategy {
    display: flex;
    width: 100%;
    height: 100%;
    .poker-strategy-table {
        flex: 1;
    }
}
</style>
